<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <meta content="telephone=no,email=no,address=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta name="renderer" content="webkit" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>feiling</title>
    <link rel="stylesheet" href="../../asset/vendor/video/video-js.min.css">
    <link rel="stylesheet" href="../../asset/vendor/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../../asset/css/main.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../asset/vendor/html5shiv.min.js"></script>
    <script src="../../asset/vendor/respond.min.js"></script>
    <script>
        alert("您的浏览器版本过低请升级！");
        location.href = "http://outdatedbrowser.com/zh-cn";
    </script>
    <![endif]-->
</head>
<body>
<!---header--->
<header id="header" class="header">
    <ul>
        <li class="special first">
            <a href="index.html">
                <img src="../../asset/images/basic/litter-title.png" alt="">
            </a>
        </li>
        <li>
            <a href="">People</a>
        </li>
        <li class="active">
            <a href="">Products</a>
        </li>
        <li>
            <a href="">Story</a>
        </li>
        <li>
            <a href="">News</a>
        </li>
        <li>
            <a href="">Contact</a>
        </li>
        <li class="special last">
            <a id="searchBtn" href="javascript:;"></a>
        </li>
    </ul>
</header>
<!---新闻列表--->
<div class="product">
    <div class="product-cont">
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
        <div class="product-item">
            <div class="product-item-cont">
                <div class="product-item-img">
                    <img src="../../asset/images/product-img-01.png" alt="">
                </div>
                <div class="product-item-name">
                    <div>Native Vegetal</div>
                    <div>Cells Essence</div>
                </div>
                <div class="product-item-des">
                    product some description
                    product some description
                    product some description
                    product some description
                </div>
                <div class="product-item-view">
                    <a class="viewDetailBtn" href="./detail.html"><span>View</span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="product-bg"></div>
</div>
<!---搜索--->
<div id="search" class="search">
    <div class="search-cont">
        <form class="search-from">
            <input type="text">
            <button class="search-btn">Search</button>
        </form>
        <div class="search-list" id="search-list">
            <div id="scrollList">
                <div class="no-data">
                    <div class="icon">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="170px" height="170px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" p-id="1801"><g p-id="1802"><path fill="#EEEEEE" d="M18.224,35.559c0,0,0.38-0.042,0.592,0.211s0.465,3.804,1.395,4.776s4.692,0.423,4.692,1.691
    c0,1.014-3.496,1.124-4.68,2.096c-1.184,0.972-0.507,5.072-1.957,4.921c-1.135-0.119-0.338-3.381-1.733-4.692
    s-4.776-1.057-4.776-2.24s3.466-0.465,4.65-1.818C17.59,39.152,17.083,35.559,18.224,35.559z" p-id="1803"></path><path fill="#B1AFAE" d="M7.726,77.11c0,0,0.23-0.026,0.357,0.128c0.128,0.153,0.281,2.296,0.842,2.883s2.832,0.255,2.832,1.02
    c0,0.612-2.11,0.678-2.824,1.265c-0.714,0.587-0.306,3.061-1.181,2.97c-0.685-0.072-0.204-2.041-1.046-2.832
    c-0.842-0.791-2.883-0.638-2.883-1.352s2.092-0.281,2.806-1.097C7.343,79.279,7.037,77.11,7.726,77.11z" p-id="1804"></path><path fill="#EEEEEE" d="M190.447,56.933c0,0,0.261-0.029,0.406,0.145s0.319,2.608,0.956,3.274c0.637,0.666,3.216,0.29,3.216,1.159
    c0,0.695-2.396,0.77-3.208,1.437c-0.811,0.666-0.348,3.477-1.341,3.373c-0.778-0.081-0.232-2.318-1.188-3.216
    c-0.956-0.898-3.274-0.724-3.274-1.536s2.376-0.319,3.187-1.246C190.013,59.396,189.665,56.933,190.447,56.933z" p-id="1805"></path><path fill="#B1AFAE" d="M154.66,25.617c0,0,0.261-0.029,0.406,0.145c0.145,0.174,0.319,2.608,0.956,3.274
    c0.637,0.666,3.216,0.29,3.216,1.159c0,0.695-2.396,0.77-3.208,1.437c-0.811,0.666-0.348,3.477-1.341,3.373
    c-0.778-0.081-0.232-2.318-1.188-3.216c-0.956-0.898-3.274-0.724-3.274-1.536s2.376-0.319,3.187-1.246
    C154.226,28.08,153.878,25.617,154.66,25.617z" p-id="1806"></path><circle fill="#EEEEEE" cx="56.234" cy="19.989" r="3.79" p-id="1807"></circle><circle fill="#EEEEEE" cx="178.362" cy="75.509" r="2.376" p-id="1808"></circle></g><circle fill="#EEEEEE" cx="95.662" cy="104.843" r="77.333" p-id="1809"></circle><path fill="#FDFDFD" d="M145.856,131.98c-0.023,3.196-2.633,5.769-5.829,5.746l-89.136-0.146c-3.196-0.023-5.769-2.633-5.746-5.829
  l0.431-56.782c0.023-3.196,2.633-5.769,5.829-5.746l72.81,0.029c5.893,5.294,13.625,12.765,21.971,19.869L145.856,131.98z" p-id="1810" data-spm-anchor-id="a313x.7781069.1998910419.i1"></path><path fill="#D8D8D8" d="M146.469,87.616c-0.026,1.112-0.949,1.992-2.061,1.966l-19.059-0.448c-1.112-0.026-1.992-0.949-1.966-2.061
  l0.381-16.217c0.026-1.112,0.949-1.992,2.061-1.966L146.469,87.616z" p-id="1811"></path><circle fill="#EEEEEE" cx="117.299" cy="128.428" r="18.247" p-id="1812"></circle><path fill="#FFFFFF" d="M117.412,148.245c2.241,0,4.352-0.653,6.209-1.801l-0.006-2.304c0,0-0.31-3.921-3.169-4.83
  c-0.044-0.014-0.76,0.77-2.055,0.699l-0.831-0.262c-0.085,0.004-0.178,0.127-0.262,0.131c-0.085-0.004-0.395-0.433-0.481-0.437
  l-0.437,0.219c-1.294,0.071-2.054-0.403-2.098-0.389c-2.859,0.909-3.073,4.869-3.073,4.869l-0.006,2.304
  C113.06,147.592,115.171,148.245,117.412,148.245z" p-id="1813"></path><path fill="#FFFFFF" d="M126.565,131.668c-0.091-4.974-4.313-8.929-9.431-8.836c-5.117,0.094-9.192,4.202-9.1,9.175
  c0.059,3.23,1.95,6.365,4.669,8.141l9.773-0.179c2.294-1.693,3.83-4.47,4.06-7.374C126.561,132.288,126.57,131.978,126.565,131.668z
   M121.961,139.026l-9.001,0.165c-2.103-1.47-3.536-3.873-3.581-6.347c-0.074-4.03,3.384-7.361,7.723-7.441
  c4.339-0.08,7.917,3.123,7.991,7.153C125.137,135.032,123.914,137.482,121.961,139.026z" p-id="1814"></path><path fill="#B1AFAE" d="M113.09,139.511l8.674-0.159c1.881-1.543,3.058-3.992,3.013-6.467c-0.074-4.029-3.523-7.233-7.705-7.157
  c-4.181,0.077-7.511,3.405-7.437,7.434C109.68,135.636,111.063,138.04,113.09,139.511z" p-id="1815"></path><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="213.0032" y1="105.5631" x2="213.0032" y2="105.5631" gradientTransform="matrix(0.9989 0.0478 -0.0478 0.9989 -99.1255 22.5725)" p-id="1816"><stop offset="0.2225" style="stop-color:#FFFFFF" p-id="1817"></stop><stop offset="1" style="stop-color:#D1D3D4" p-id="1818"></stop></linearGradient><path fill="url(#SVGID_1_)" d="M108.588,138.199" p-id="1819"></path><path fill="#B1AFAE" d="M122.101,140.456c-1.196,0.936-3.021,0.947-4.737,0.969c-1.752,0.023-3.397,0.04-4.644-0.756
  c-0.398-0.254-0.581-0.843-0.41-0.847l10.184-0.231C122.665,139.587,122.402,140.221,122.101,140.456z" p-id="1820"></path><path fill="#C8C7C6" d="M109.59,133.167c-0.074-4.049,3.268-7.393,7.465-7.47c4.197-0.077,7.659,3.143,7.734,7.191
  c0.03,1.624-0.464,3.237-1.336,4.592c1.06-1.425,1.672-3.18,1.639-4.947c-0.074-4.049-3.665-7.267-8.02-7.187
  c-4.355,0.08-7.826,3.427-7.752,7.477c0.027,1.493,0.558,2.96,1.434,4.214C110.041,135.862,109.615,134.525,109.59,133.167z" p-id="1821"></path><path fill="#FFFFFF" d="M122.199,140.266c-1.218,0.535-3.07,0.508-4.805,0.538c-1.771,0.031-3.424,0.109-4.676-0.323
  c-0.399-0.138-0.578-0.465-0.406-0.469l10.293-0.234C122.778,139.775,122.506,140.132,122.199,140.266z" p-id="1822"></path><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="221.3779" y1="106.4216" x2="221.3779" y2="106.4216" gradientTransform="matrix(0.9989 0.0478 -0.0478 0.9989 -99.1255 22.5725)" p-id="1823"><stop offset="0.2225" style="stop-color:#FFFFFF" p-id="1824"></stop><stop offset="1" style="stop-color:#D1D3D4" p-id="1825"></stop></linearGradient><path fill="url(#SVGID_2_)" d="M116.912,139.457" p-id="1826"></path><path fill="#C1C1C1" d="M122.63,139.791c0,0.241-0.196,0.437-0.437,0.437h-9.617c-0.241,0-0.437-0.196-0.437-0.437l0,0
  c0-0.241,0.196-0.437,0.437-0.437h9.617C122.434,139.354,122.63,139.549,122.63,139.791L122.63,139.791z" p-id="1827"></path><path fill="#B1AFAE" d="M119.922,145.551c0,0.108-0.088,0.196-0.196,0.196l-4.626,0.003c-0.108,0-0.196-0.088-0.196-0.196
  l-0.002-3.131c0-0.108,0.088-0.196,0.196-0.196l4.626-0.003c0.108,0,0.196,0.088,0.196,0.196L119.922,145.551z" p-id="1828"></path><path fill="#CCCCCC" d="M119.374,145.166c0,0.082-0.069,0.148-0.153,0.148l-3.616,0.002c-0.085,0-0.154-0.066-0.154-0.148
  l-0.001-2.36c0-0.082,0.069-0.148,0.153-0.148l3.616-0.002c0.085,0,0.154,0.066,0.154,0.148L119.374,145.166z" p-id="1829"></path><rect x="115.894" y="143.119" fill="#FFFFFF" width="1.315" height="0.527" p-id="1830"></rect><rect x="117.613" y="143.118" fill="#FFFFFF" width="1.315" height="0.527" p-id="1831"></rect><rect x="115.895" y="144.042" fill="#FFFFFF" width="3.034" height="0.813" p-id="1832"></rect><g p-id="1833"><path fill="#D8D8D8" d="M111.976,131.974c-0.82-0.543,0.176-2.081,1.023-2.932s1.519-1.188,2.189-1.014
    c0.469,0.122,1.102,1.168-0.015,2.077C113.919,131.126,113.369,132.898,111.976,131.974z" p-id="1834"></path><circle fill="#D8D8D8" cx="111.865" cy="133.908" r="0.962" p-id="1835"></circle></g><path fill="#D8D8D8" d="M112.247,85.099c0,1.057-0.857,1.913-1.913,1.913H59.158c-1.057,0-1.913-0.857-1.913-1.913l0,0
  c0-1.057,0.857-1.913,1.913-1.913h51.175C111.39,83.186,112.247,84.042,112.247,85.099L112.247,85.099z" p-id="1836"></path><path fill="#D8D8D8" d="M83.201,98.717c0,1.057-0.857,1.913-1.913,1.913H59.158c-1.057,0-1.913-0.857-1.913-1.913l0,0
  c0-1.057,0.857-1.913,1.913-1.913h22.129C82.344,96.804,83.201,97.66,83.201,98.717L83.201,98.717z" p-id="1837"></path><path fill="#D8D8D8" d="M83.201,112.335c0,1.057-0.857,1.913-1.913,1.913H59.158c-1.057,0-1.913-0.857-1.913-1.913l0,0
  c0-1.057,0.857-1.913,1.913-1.913h22.129C82.344,110.422,83.201,111.278,83.201,112.335L83.201,112.335z" p-id="1838"></path><path fill="#D8D8D8" d="M141.451,148.653c-0.669-0.798-1.858-0.902-2.656-0.234l-0.003,0.003l-2.983-3.559
  c3.835-4.361,6.162-10.08,6.162-16.344c0-13.675-11.086-24.76-24.76-24.76c-13.675,0-24.76,11.086-24.76,24.76
  c0,13.675,11.086,24.76,24.76,24.76c5.177,0,9.983-1.59,13.957-4.307l2.876,3.43l-0.003,0.003c-0.798,0.669-0.902,1.858-0.234,2.656
  l9.153,10.918c2.63-2.047,5.132-4.249,7.475-6.612L141.451,148.653z M117.149,146.768c-10.078,0-18.247-8.17-18.247-18.248
  c0-10.078,8.17-18.247,18.247-18.247c10.078,0,18.248,8.17,18.248,18.247C135.397,138.598,127.227,146.768,117.149,146.768z" p-id="1839"></path></svg>
                    </div>
                    <div class="text">No query related data</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--返回顶部-->
<a href="javascript:;" id="to-top"></a>
<!---产品详情--->
<div id="detail-frame" class="product-detail-modal detail-modal">
    <div id="detailCont">

    </div>
    <div id="closeDetailModal" class="detail-modal-mask"><span class="">Close</span></div>
</div>
<script src="../../asset/vendor/jquery.min.js"></script>
<script src="../../asset/vendor/swiper/js/swiper.min.js"></script>
<script src="../../asset/vendor/jquery.slimscroll.min.js"></script>
<script src="../../asset/js/main.js"></script>
<script>
    $(function(){

//查看新闻详情
        var detailModal = $("#detail-frame");
        var detailModalCont = $("#detailCont");
        $(".viewDetailBtn").each(function(index){
            $(this).on("click",function(){
                var link = $(this).attr("href");
                detailModalCont.load(link);
                $('body').addClass("hidden");
                detailModal.fadeIn();
                return false;
            })
        });

        $("#closeDetailModal").on("click",function(){
            detailModal.hide();
            detailModalCont.html('');
            $('body').removeClass("hidden");
        });


        detailModal.on("scroll",function(){
            if( $(this).scrollTop() > 500 ){
                $("#product-detail-video").addClass("fixed");
            }else{
                $("#product-detail-video").removeClass("fixed");
            }
        })

    });
</script>
</body>
</html>